textfield 输入框

更新时间：2023-06-09

iov-textfield 输入框

输入框

属性说明：

属性名	类型	默认值	必填	说明
class-name	String	无	否	自定义 class
value	String	无	否	输入框的内容
error	Boolean	false	否	是否展示错误样式
getPhone	Boolean	false	否	是否显示自动填写手机号码｜
isForceGetPhone	Boolean	false	否	当 input 有值时，是否显示自动填写手机号码｜
password	Boolean	false	否	是否是密码类型，为 true 的情况下，会展示出查看图标
allowclear	Boolean	false	否	是否可以清空
placeholder	String	无	否	输入框为空时占位符
placeholder-style	String	无	否	placeholder 的样式
placeholder-class	String	无	input-placeholder	placeholder 的样式类
disabled	Boolean	false	否	是否禁用
onlybottomborder	Boolean	false	否	仅展示下边框
confirmHold	Boolean	false	否	点击键盘右下角按钮时是否保持键盘不收起
cursor	Number	无	否	指定 focus 时的光标位置开发者工具暂不支持
selectionStart	Number	-1	否	光标起始位置，自动聚焦时有效，需与 selection-end 搭配使用
selectionEnd	Number	-1	否	光标结束位置，自动聚焦时有效，需与 selection-start 搭配使用
bindinput	EventHandle	无	否	当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}，keyCode 为键值。
bindfocus	EventHandle	无	否	输入框聚焦时触发，event.detail = {value: value, height: height}, height 为键盘高度。
bindblur	EventHandle	无	否	输入框失去焦点时触发，event.detail = {value: value}。
bindconfirm	EventHandle	无	否	点击完成按钮时触发，event.detail = {value: value}。
voiceName	String	无	否	语音指令 voiceName
voiceTag	String	无	否	语音指令 voiceTag
maxlength	Number	140	否	最大字数限制

示例：

json:

{
    "navigationBarTitleText": "iov-input 组件",
    "usingComponents": {
        "iov-input": "iov-ui/lib/textfield"
    }
}

swan:

  <view>
    <iov-input
        type="number"
        value="{{text1}}"
        bindinput="bindinput"
        placeholder="请输入"
    />
</view>
<view>
    <iov-input
        value="{{text2}}"
        bindinput="bindinput2"
        placeholder="请输入"
        password="{{true}}"
    />
</view>
<view>
    <iov-input
        value="{{text3}}"
        bindinput="bindinput3"
        placeholder="请输入"
        allowclear="{{true}}"
    />
</view>
<view>
    <iov-input
        value="{{text4}}"
        bindinput="bindinput4"
        placeholder="请输入"
        password="{{true}}"
        allowclear="{{true}}"
    />
</view>
<view>
    <iov-input
        value="{{text5}}"
        bindinput="bindinput5"
        onlybottomborder="{{true}}"
        placeholder="请输入"
        password="{{true}}"
        allowclear="{{true}}"
    />
</view>
<view>
    <button
        size="default"
        type="primary"
        bindtap="clear"
    >click me</button>
</view>

js:

Page({
    data: {
        text1: ''
    },
    bindfocus() {
    },
    bindinput(e) {
        this.setData({
            text1: e.detail.value
        });
    },
    bindinput2(e) {
        this.setData({
            text2: e.detail.value
        });
    },
    bindinput3(e) {
        console.log(e);
        this.setData({
            text3: e.detail.value
        });
    },
    bindinput4(e) {
        this.setData({
            text4: e.detail.value
        });
    },
    bindinput5(e) {
        this.setData({
            text5: e.detail.value
        });
    },
    clear() {
        this.setData({
            text1: ''
        });
    }
});

tag-select 标签选择 titlebar